<div class="cl_header">
  <div class="cl_logo">
    <a href="/">
      <img class="default" src="../assets/images/home_logo.png" alt="">
      <img class="white" src="../assets/images/white_logo.png" alt="">
    </a>
  </div>
  <div class="cl_tabs">
    <ul>
      <li class="cl_tabs_li home_li" data-attr="home">
        <a href="/">
          首页
        </a>
      </li>
      <li class="cl_tabs_li" data-attr="technical-service">
        <a href="javascript:void(0)">技术服务</a>
        <div id="technical-service" class="panel" style="opacity: 0;">
          <div class="panel_pages">
            <div class="left">
              <p>
                <a data-attr="it-consulting-service" href="/technical-service/it-consulting-service.html">IT咨询</a>
              </p>
              <p>
                <a href="javascript:void(0)">系统应用设计和开发</a>
              </p>
              <p>
                <a href="javascript:void(0)">移动应用计和开发</a>
              </p>
              <p>
                <a data-attr="human-resources" href="/technical-service/human-resources.html">人力资源服务</a>
              </p>
              <p>
                <a href="javascript:void(0)">云服务</a>
              </p>
              <p>
                <a data-attr="big-data" href="/technical-service/big-data.html">大数据</a>
              </p>
              <p>
                <a href="javascript:void(0)">行业优秀案例</a>
              </p>
            </div>
            <div class="right">
              <img src="../assets/images/server01.png" alt="">
            </div>
          </div>
        </div>
      </li>
      <li class="cl_tabs_li" data-attr="industry-scheme">
        <a href="javascript:void(0)">
          行业方案
        </a>
        <div id="industry-scheme" class="panel" style="opacity: 0;">
          <div class="panel_pages">
            <div class="left">
              <p>
                <a href="javascript:void(0)">EHR解决方案</a>
              </p>
              <p>
                <a href="javascript:void(0)">智慧游客解决方案</a>
              </p>
              <p>
                <a href="javascript:void(0)">药店智慧解决方案</a>
              </p>
              <p>
                <a href="javascript:void(0)">医药流通</a>
              </p>
              <p>
                <a href="javascript:void(0)">通用行业解决方案</a>
              </p>
            </div>
            <div class="right">
              <img src="../assets/images/server03.png" alt="">
            </div>
          </div>
        </div>
      </li>
      <li class="cl_tabs_li" data-attr="product-agent">
        <a href="javascript:void(0)">
          产品代理
        </a>
        <div id="product-agent" class="panel" style="opacity: 0;">
          <div class="panel_pages">
            <div class="left">
              <p>
                <a href="javascript:void(0)">产品代理</a>
              </p>
            </div>
            <div class="right">
              <img src="../assets/images/server02.png" alt="">
            </div>
          </div>
        </div>
      </li>
      <li class="cl_tabs_li" data-attr="about-us">
        <a href="javascript:void(0)">
          关于我们
        </a>
        <div id="about-us" class="panel" style="opacity: 0;">
          <div class="panel_pages">
            <div class="left">
              <p>
                <a href="javascript:void(0)">关于我们</a>
              </p>
              <p>
                <a href="javascript:void(0)">加入我们</a>
              </p>
            </div>
            <div class="right">
              <img src="../assets/images/server03.png" alt="">
            </div>
          </div>
        </div>
      </li>
      <li class="cl_tabs_li" data-attr="contact-us">
        <a href="javascript:void(0)">
          联系我们
        </a>
        <div id="contact-us" class="panel" style="opacity: 0;">
          <div class="panel_pages">
            <div class="left">
              <p>
                <a href="javascript:void(0)">客户案例-润药</a>
              </p>
              <p>
                <a href="javascript:void(0)">客户案例-英特</a>
              </p>
            </div>
            <div class="right">
              <img src="../assets/images/server02.png" alt="">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script defer async>
  $(function () {

    // attr 属性从父级页面设置  这里获取
    let currTab = $('.cl_header').attr('currtab');
    let subItem = $('.cl_header').attr('subItem');

    $(".cl_tabs ul li").each(function () {
      let attr = $(this).attr('data-attr');
      if (attr == currTab) {
        $(this).addClass('active')
        $(this).find(`[data-attr=${subItem}]`).addClass('active')
      }
    });

    // 等于首页的时候，显示透明色logo，隐藏白色logo
    // 等于其他页面的时候，添加 一个 cl_header_white 类名 区分样式
    if (currTab == 'home') {
      $('.default').show()
      $('.white').hide()
    } else {
      $('.default').hide()
      $('.white').show()
      $('.cl_header').addClass('cl_header_white');
    }



    $(".cl_tabs ul li").hover(function () {
      let attr = $(this).attr('data-attr');
      $('#' + attr).removeClass('hidePanel').addClass('showPanel')
    }, function () {
      let attr = $(this).attr('data-attr');
      $('#' + attr).removeClass('showPanel').addClass('hidePanel')
    });
  })

  // 
</script>